<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的数据绑定方式</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
    Vue中有2种数据绑定的方式:
        1.单向绑定（v-bind）:数据只能从data流向页面。
        2.双向绑定（v-model）:数据不仅能从data流向页面,还可以从页面流向data。
        注意:
            1.双向绑定一般应用在表单类元素上（如:input、select等）
            2.v-model:value 可以简写为v-model，因为v-model默认收集的就是value值。
        3.data与el的两种写法：
            1.el写法:
                1.new Vue时侯配置el属性。
                2.先创建Vue实例，随后再通过vm.$mount('#dome')指定el的值
            2.data写法:
                1.对象式
                2.函数式
                如何选择:目前学习阶段都可以，以后学习到组件时，data必须使用函数式，否者会报错
            3.一个重要的原则:
                由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不在是Vue实例了。
-->
    <div id = "demo">
        姓名:<input type="text" v-bind:value=name></br>
        年龄:<input type="number" v-model=age>
    </div>

</body>
    <script>
        Vue.config.productionTip = false;
// el的第一种写法: new Vue时侯配置el属性，data的第一种写法:对象式
        new Vue({
            el:"#demo",
            data:{
                name:"张三",
                age:18
            }
        })

// el的第二种写法: vm.$mount('#dome')指定el的值，data第二种写法 函数式
        // let vm = new Vue({
        //     data() {
        //         return {
        //             name: "张三",
        //             age: 18
        //         }
        //     }
        // });
        // vm.$mount('#demo');

    </script>
</html>
